<template>
  <div class="matreial">
    <el-dialog
      v-dialogDrag
      :title="$t('menu.credentialsTask')"
      model
      :visible.sync="isMaterialDialog"
      :close-on-click-modal="false"
      :before-close="handleClose"
      width="60%"
      top="5vh"
      append-to-body
    >
      <div>
        <jc-table
          :table-data="tableData"
          :table-header="tableHeader"
          table-height="53vh"
          serial
          @rowClick="rowClick"
        >
          <template v-slot:text2Slot="col">
            <el-date-picker
              v-model="col.scope.row.fperiod"
              type="month"
              value-format="yyyy-MM"
              style="width: 152px"
              placeholder="选择月"
            />
          </template>
          <template v-slot:text3Slot="col">
            <el-select
              v-model="col.scope.row.fgenerate"
              size="mini"
            >
              <el-option
                v-for="item in billtype"
                :key="item.fid"
                :label="item.fname"
                :value="item.fid"
              />
            </el-select>
          </template>
          <template v-slot:text4Slot="col">
            <el-select
              v-model="col.scope.row.fmatching"
              size="mini"
            >
              <el-option
                v-for="item in billtype1"
                :key="item.fid"
                :label="item.fname"
                :value="item.fid"
              />
            </el-select>
          </template>
        </jc-table>
      </div>
      <div style="text-align: center;margin-top: 5px">
        <el-button type="primary" @click="materielSelectRow">{{ $t('menu.credentialsTask') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { queryTaskVoucherConfig } from '@/api/financial/cashier'
import { queryViewItem } from '@/api/marketManage/marketOrder'

export default {
  props: {
    enumId: {
      type: Number,
      default: 2
    }
  },
  data() {
    return {
      indexSelf: 0,
      isMaterialDialog: true,
      tableData: [],
      tableHeader: [
        { label: this.$t('market.bookAccount'), prop: 'forgname' },
        { label: this.$t('market.period'), type: 'text2' },
        { label: this.$t('market.implement'), prop: 'fimplement' },
        { label: this.$t('market.generate'), type: 'text3' },
        { label: this.$t('market.matching'), type: 'text4' }
      ],
      billtype: [],
      billtype1: [],
      prodValue: { isMaterialDialog: false }
    }
  },
  created() {
    this.handleGetMateriel()
    this.queryTBasBilltype()
    this.queryTBasBilltype1()
  },
  methods: {
    // 查询单据类型
    async queryTBasBilltype() {
      const { data: RES } = await queryViewItem({ viewName: 'FIN_VOUCHERCONFIG' })
      this.billtype = RES.list
    },
    // 查询单据类型
    async queryTBasBilltype1() {
      const { data: RES } = await queryViewItem({ viewName: 'FIN_FMATCHING' })
      this.billtype1 = RES.list
    },
    // 凭证生产
    async materielSelectRow() {
      this.$emit('voucher', this.tableData[0])
    },
    // 打开凭证弹窗
    async handleGetMateriel() {
      const DATA = {
        enumId: this.enumId
      }
      const { data: RES } = await queryTaskVoucherConfig(DATA)
      const year = new Date().getFullYear()
      const month = new Date().getMonth() + 1
      RES.fperiod = year + '-' + month
      this.tableData = [RES]
    },
    // 关闭前回调
    handleClose() {
      this.$emit('voucher')
    },
    // 单击行
    rowClick(row) {
      this.indexSelf = row.index
    },
    // 新增 删除行
    twoLine(ev) {
      if (ev === 1) {
        this.tableData.push({
          fname: ''
        })
      } else {
        this.tableData.splice(this.indexSelf, 1)
      }
    }
  }
}
</script>
<style scoped lang="scss">
.materiel-form{
  position:relative;
  width: 100%;
  .btn{
    transform: translateY(18%);
    margin-left: 450px !important;
  }
  .btn1 {
    margin-left: 15px !important;
  }
}
.el-table {
  margin-top: 15px;
}
</style>

